<template>
  <div>
    <a-form-model
      ref="detil"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :hideRequiredMark="true"
    >
      <div class="flex justify-end" v-if="!Archive">
        <a-button v-if="readOnly" type="primary" @click="readOnly = false" v-action:update>修改</a-button>
        <a-button v-else type="primary" @click="change" v-action:update>保存</a-button>
      </div>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="项目地址:" prop="addr">
            <a-input v-model="form.addr" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="客户名称:" prop="clientName">
            <a-input v-model="form.clientName" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="目的:" prop="aims">
            <a-input v-model="form.aims" :disabled="readOnly" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="贷款期限：" prop="duration">
            <a-input v-model="form.duration" disabled>
              <a-select slot="addonAfter" v-model="form.durationUnit" prop="durationUnit" disabled>
                <a-select-option :value="item.value" v-for="item in unit" :key="item.text">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="贷款期：">
            <a-input v-model="loanTime" disabled class="length" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="承诺金总金额：" prop="principal">
            <m-input-number v-model="form.principal" disabled class="length" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="资金成本：" prop="costCapital">
            <m-input-number v-model="form.costCapital" disabled class="length" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="贷款总金额：" prop="totalLoan">
            <m-input-number :value="form.totalLoan" disabled class="length" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="加贷后承诺金总金额：" prop="loanAddPrincipalAfter">
            <m-input-number v-model="form.loanAddPrincipalAfter" disabled class="length" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="加贷后资金成本：" prop="loanAddCapitalAfter">
            <m-input-number v-model="form.loanAddCapitalAfter" disabled class="length" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="加贷后贷款总金额：">
            <m-input-number :value="loanAddTotal" disabled class="length" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8" v-if="form.loanDelaysDuration">
          <a-form-model-item label="延期后期限：" prop="loanDelaysDuration">
            <a-input-number
              style="width:200px"
              v-model="form.loanDelaysDuration"
              disabled
              :min="0"
              :precision="2"
              :formatter="value => `${value}月`"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="利息计算方式：" prop="interestCalcType">
            <a-select v-model="form.interestCalcType" disabled>
              <a-select-option :value="item.value" v-for="item in interestCalc" :key="item.text">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="利息付款方式：" prop="interestPayType">
            <a-select v-model="form.interestPayType" disabled>
              <a-select-option :value="item.value" v-for="item in interestPay" :key="item.text">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="利息利率：" prop="rate">
            <a-input v-model="form.rate" addon-after="%" disabled>
              <a-select prop="rateType" slot="addonBefore" v-model="form.rateType" disabled>
                <a-select-option :value="item.value" v-for="item in rateTypes" :key="item.text">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-input>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="开始日期">
            <a-date-picker v-model="form.firstLoanTime" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="结束日期">
            <a-date-picker v-model="form.sysEndTime" disabled />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <div v-if="!!LoanAdd.length">
      <a-divider />
      <h1>加贷:</h1>
      <a-form-model
        :model="addform"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        v-for="(addform, i) in LoanAdd"
        :key="i"
        class="box"
      >
        <h1>加贷{{ i + 1 }}</h1>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="加贷本金金额：">
              <m-input-number v-model="addform.principal" class="length" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="加贷资金成本：">
              <m-input-number v-model="addform.capital" class="length" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="加贷出借人手续费：">
              <m-input v-model="addform.rate" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="加贷出借人手续费付款方式：">
              <a-select v-model="addform.feePayType" disabled>
                <a-select-option :value="1">
                  立即付
                </a-select-option>
                <a-select-option :value="4">
                  立即资本化
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="加贷出借人手续费生效日期：">
              <a-date-picker v-model="addform.workDate" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <div v-if="!!LoanDelay.length">
      <a-divider />
      <h1>延期:</h1>
      <a-form-model
        :model="delayform"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        v-for="(delayform, i) in LoanDelay"
        :key="i"
        class="box"
      >
        <h1>延期{{ i + 1 }}</h1>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="延期本金金额：">
              <m-input-number v-model="delayform.principal" disabled class="length" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="延期资金成本：">
              <m-input-number v-model="delayform.capital" disabled class="length" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="延期时间段：">
              <a-input v-model="delayform.dateRange" disabled class="length" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="利息利率：">
              <a-input
                v-model="delayform.delayRate"
                addon-after="%"
                @change="delayform.delayRate = delayform.delayRate.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                disabled
              >
                <a-select slot="addonBefore" v-model="delayform.delayRateUnit" disabled>
                  <a-select-option :value="item.value" v-for="item in rateTypes" :key="item.text">
                    {{ item.text }}
                  </a-select-option>
                </a-select>
              </a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="延期贷款限额费：">
              <m-input v-model="delayform.limitRate" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="延期限额费付款方式：">
              <a-select v-model="delayform.limitPayType" disabled>
                <a-select-option :value="2">
                  月付
                </a-select-option>
                <a-select-option :value="3">
                  每月资本化
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="延期出借人手续费：">
              <m-input v-model="delayform.commissionRate" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="延期出借人手续费付款方式：">
              <a-select v-model="delayform.commissionPayType" disabled>
                <a-select-option :value="1">
                  立即付
                </a-select-option>
                <a-select-option :value="4">
                  立即资本化
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="延期出借人手续费生效日期：">
              <a-date-picker v-model="delayform.commissionPayDate" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="其他费用付款方式：">
              <a-select v-model="delayform.otherPayType" disabled>
                <a-select-option :value="item.value" v-for="item in limitFeeTypes" :key="item.text">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="其他费用：">
              <a-input v-model="delayform.otherAmount" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row v-if="delayform.otherPayType == 4">
          <a-col :span="12">
            <a-form-model-item label="其他费用生效日期：">
              <a-date-picker v-model="delayform.otherPayDate" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <a-form-model
      ref="detil"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :hideRequiredMark="true"
    >
      <a-divider />
      <h1>贷款限额费:</h1>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="贷款限额费付款方式：" prop="limitFeeType">
            <a-select v-model="form.limitFeeType" disabled>
              <a-select-option :value="item.value" v-for="item in limitFeeTypes" :key="item.text">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="贷款限额费：" prop="limitFeeRate">
            <m-input v-model="form.limitFeeRate" disabled />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="生效开始日期：" prop="limitFeeStartDate">
            <a-date-picker v-model="limitFeeStart" @change="limitFeeChange" :disabled="readOnly" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="生效日期：" prop="limitFeeDay">
            每月<a-input-number v-model="form.limitFeeDay" disabled :min="0" />号
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="贷款限额费金额：">
            <m-input-number :value="limitFee" disabled class="length" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-divider />
      <h1>出借人手续费:</h1>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="出借人手续费付款方式：" prop="commissionType">
            <a-select v-model="form.commissionType" disabled>
              <a-select-option :value="item.value" v-for="item in limitFeeTypes" :key="item.text">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="出借人手续费：" prop="commissionRate">
            <m-input v-model="form.commissionRate" disabled />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="生效开始日期：" prop="commissionStartDate">
            <a-date-picker v-model="commissionStart" @change="commissionChange" :disabled="readOnly" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="出借人手续费金额：">
            <a-input :value="serviceCharge" disabled />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-divider />
      <h1>其他费用:</h1>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="其他费用付款方式：" prop="otherFeeType">
            <a-select v-model="form.otherFeeType" disabled>
              <a-select-option :value="item.value" v-for="item in limitFeeTypes" :key="item.text">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="其他费用：" prop="otherFee">
            <m-input-number v-model="form.otherFee" disabled class="length" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="其他费用说明：" prop="otherFeeInstruction">
            <a-textarea v-model="form.otherFeeInstruction" class="text" :rows="4" disabled />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-if="form.otherFeeType != 1">
        <a-col :span="8">
          <a-form-model-item label="生效开始日期：" prop="otherFeeStartDate">
            <a-date-picker v-model="otherFeeStart" @change="otherFeeChange" :disabled="readOnly" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8" v-if="form.otherFeeType == 2 || form.otherFeeType == 3">
          <a-form-model-item label="生效日期：" prop="otherFeeDay">
            每月<a-input-number v-model="form.otherFeeDay" disabled :min="0" />号
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-divider />
      <h1>退出费：</h1>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="退出费：" prop="exitFeeRate">
            <m-input v-model="form.exitFeeRate" disabled />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="退出费金额：">
            <m-input-number :value="exitFee" disabled class="length" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-divider />
      <h1>违约：</h1>
      <a-row class="flex items-center">
        <a-col :span="8">
          <a-form-model-item label="违约利率：" prop="defaultRate" @blur="changeSwitch">
            <a-input v-model="form.defaultRate" addon-after="%" :disabled="readOnly">
              <a-select prop="rateType" slot="addonBefore" v-model="form.defaultRateType" :disabled="readOnly">
                <a-select-option :value="item.value" v-for="item in rateTypes" :key="item.text">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-input>
          </a-form-model-item>
        </a-col>
        <a-switch class="switch" v-model="form.defaultContract" :disabled="readOnly" />
      </a-row>
    </a-form-model>
  </div>
</template>
<script>
import { curr, unit, interestCalc, interestPay, rateTypes, limitFeeTypes } from '@/dict'
import moment from 'moment'
import { getDetailList, updateProjectById, updateloanDataById, getAddLoan, getloanDelay } from '@/api/common'
import NP from 'number-precision'
import mInputNumber from '@/com/mInputNumber.vue'
import { commonRule, dateRule } from '@/utils/rules'
export default {
  components: { mInputNumber },
  name: 'Detail',
  data() {
    return {
      id: '',
      unit,
      curr,
      interestCalc,
      interestPay,
      rateTypes,
      limitFeeTypes,
      limitFeeStart: null,
      commissionStart: null,
      otherFeeStart: null,
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
      readOnly: true,
      loanTime: '',
      form: {
        addr: '',
        clientName: '',
        aims: '',
        duration: '',
        durationUnit: 2,
        principal: '',
        costCapital: '',
        totalLoan: '',
        loanAddPrincipalAfter: '',
        loanAddCapitalAfter: '',
        loanDelaysDuration: '',
        interestCalcType: 1,
        interestPayType: 1,
        rate: '',
        firstLoanTime: '',
        sysEndTime: '',
        rateType: 3,
        limitCalcType: 0,
        limitFeeType: 1,
        limitFeeRate: '',
        limitFeeStartDate: null,
        limitFeeDay: '',
        commissionType: 1,
        commissionRate: '',
        commissionStartDate: null,
        otherFeeType: 1,
        otherFee: '',
        otherFeeStartDate: null,
        otherFeeDay: '',
        otherFeeInstruction: '',
        exitFeeRate: '',
        defaultRate: '',
        defaultRateType: 3,
        defaultContract: false
      },
      LoanAdd: [],
      LoanDelay: [],
      rules: {
        limitFeeStartDate: dateRule,
        commissionStartDate: dateRule,
        defaultRate: commonRule,
        otherFeeStartDate: dateRule
      }
    }
  },
  computed: {
    Archive() {
      return Number(this.$route.query.Archive)
    },
    // 贷款限额费金额
    limitFee() {
      var a = NP.divide(NP.times(Number(this.form.totalLoan), Number(this.form.limitFeeRate)), 100)
      var b = NP.times(a, Number(this.form.duration))
      var limitFee1 = this.form.durationUnit == 2 ? NP.divide(b, 12) : b
      return limitFee1.toFixed(2)
    },
    //出借人手续费金额
    serviceCharge() {
      var b = NP.divide(NP.times(this.form.totalLoan, this.form.commissionRate), 100)
      return b.toFixed(2)
    },
    //退出费金额
    exitFee() {
      var b = NP.divide(NP.times(this.form.totalLoan, this.form.exitFeeRate), 100)
      return b.toFixed(2)
    },
    //加贷后贷款总金额
    loanAddTotal() {
      var a = NP.plus(this.form.loanAddPrincipalAfter, this.form.loanAddCapitalAfter)
      return a.toFixed(2)
    }
  },
  mounted() {
    this.getData()
    this.getLoan()
  },
  methods: {
    change() {
      if (this.form.aims) {
        this.writeAims()
      }
      if (this.form.defaultRateType) {
        this.changeSwitch()
      }
      this.readOnly = true
    },
    limitFeeChange() {
      this.form.limitFeeStartDate = Number(
        moment(this.limitFeeStart)
          .startOf('day')
          .format('X')
      )
      if (this.form.limitCalcType == 1) {
        this.form.limitFeeDay = 1
      } else {
        this.form.limitFeeDay = moment(this.limitFeeStart).date()
      }
      var _form = {}
      _form.limitFeeStartDate = this.form.limitFeeStartDate
      _form.limitFeeDay = this.form.limitFeeDay
      _form.id = this.id
      if (_form.limitFeeStartDate != 0) {
        updateloanDataById(_form)
      }
    },
    commissionChange() {
      var commissionDay = moment(this.commissionStart).date()
      this.form.commissionStartDate = moment(this.commissionStart)
        .startOf('day')
        .format('X')
      var _data = {}
      _data.commissionPayDate = this.form.commissionStartDate
      _data.commissionDay = commissionDay
      _data.id = this.id
      if (_data.commissionStartDate != 0) {
        updateloanDataById(_data)
      }
    },
    otherFeeChange() {
      this.form.otherFeeDay = moment(this.otherFeeStart).date()
      this.form.otherFeeStartDate = Number(
        moment(this.otherFeeStart)
          .startOf('day')
          .format('X')
      )

      var _form = {}
      if (this.form.otherFeeType == 2 || this.form.otherFeeType == 3) {
        _form.otherFeeStartDate = this.form.otherFeeStartDate
      } else if (this.form.otherFeeType == 4) {
        _form.otherFeePayDay = this.form.otherFeeStartDate
      }
      _form.otherFeeDay = this.form.otherFeeDay
      _form.id = this.id
      if (_form.otherFeeStartDate != 0) {
        updateloanDataById(_form)
      }
    },
    async getData() {
      const id = this.$route.query.id
      const res = await getDetailList(id)
      const _form = res.result.data
      if (_form.loanData) {
        for (let k in _form.loanData) {
          this.form[k] = _form.loanData[k]
        }
      }
      const count = _form.loanData.durationUnit == 3 ? _form.loanData.duration * 12 : _form.loanData.duration
      // console.log(count)
      this.loanTime = _form.firstLoanTime
        ? `${moment(_form.firstLoanTime * 1000).format('YYYY-MM-DD')}——${moment(_form.firstLoanTime * 1000)
            .add(count, 'month')
            .format('YYYY-MM-DD')}`
        : null
      this.form.addr = _form.addr
      this.form.aims = _form.aims
      this.form.clientName = _form.clientName
      this.form.defaultRate = _form.defaultRate
      this.form.loanAddPrincipalAfter = _form.loanAddPrincipalAfter
      this.form.loanAddCapitalAfter = _form.loanAddCapitalAfter
      this.form.loanDelaysDuration = _form.loanDelaysDuration
      this.form.firstLoanTime = _form.firstLoanTime ? moment(_form.firstLoanTime * 1000) : null
      this.form.sysEndTime = _form.realEndTime
        ? moment(_form.realEndTime * 1000)
        : _form.sysEndTime
        ? moment(_form.sysEndTime * 1000)
        : null
      this.form.defaultRateType = _form.defaultRateType ? _form.defaultRateType : 3
      this.form.defaultContract = _form.defaultContract == 0 ? false : true
      this.form.limitCalcType = _form?.loanData?.limitCalcType
      var fee = _form?.loanData?.fee
      this.id = _form?.loanData?.id
      fee &&
        fee?.forEach(el => {
          if (el.feeType == 1) {
            this.form.limitFeeRate = el.rate
            this.form.limitFeeType = el.feePayType
            this.limitFeeStart = el.startDate ? moment(el.startDate * 1000) : null
            this.form.limitFeeDay = el.day
          }
          if (el.feeType == 2) {
            this.form.commissionRate = el.rate
            this.form.commissionType = el.feePayType
            this.commissionStart = el.payDate ? moment(el.payDate * 1000) : null
          }
          if (el.feeType == 3) {
            this.form.otherFee = el.amount
            this.form.otherFeeType = el.feePayType
            this.form.otherFeeInstruction = el.instruction
            if (el.feePayType == 2 || el.feePayType == 3) {
              this.otherFeeStart = el.startDate ? moment(el.startDate * 1000) : null
            } else if (el.feePayType == 4) {
              this.otherFeeStart = el.payDate ? moment(el.payDate * 1000) : null
            }
            this.form.otherFeeDay = el.day
          }
        })
    },
    async getLoan() {
      const add = await getAddLoan({ projectId: this.$route.query.id })
      this.LoanAdd = add.result.data.list
      this.LoanAdd.forEach(el => {
        el.workDate = el.workDate ? moment(el.workDate * 1000) : null
      })
      const delay = await getloanDelay({ projectId: this.$route.query.id })
      this.LoanDelay = delay.result.data.list
      this.LoanDelay.forEach(el => {
        el.commissionPayDate = el.commissionPayDate ? moment(el.commissionPayDate * 1000) : null
        el.otherPayDate = el.otherPayDate ? moment(el.otherPayDate * 1000) : null
        el.dateRange = `${moment(el.delayStartDate * 1000).format('YYYY-MM-DD')}——${moment(
          el.delayEndDate * 1000
        ).format('YYYY-MM-DD')}`
      })
    },
    writeAims() {
      var id = this.$route.query.id
      var _form = {}
      _form.aims = this.form.aims
      updateProjectById(id, _form)
    },
    changeSwitch() {
      var id = this.$route.query.id
      var _form = {}
      _form.defaultRate = this.form.defaultRate
      _form.defaultRateType = this.form.defaultRateType
      _form.defaultContract = this.form.defaultContract == false ? 0 : 1
      const res = updateProjectById(id, _form)
    }
  }
}
</script>
<style lang="css" scoped>
.switch {
  margin-left: 25px;
  margin-top: -20px;
}
.text {
  resize: unset;
  vertical-align: top;
}
.length {
  width: 250px;
}
.box {
  border: 1px solid rgb(184, 182, 182);
  padding: 15px;
  margin: 25px;
  border-radius: 10px;
}
</style>
